<template>
  <div class="zui-red-dot">
    <slot></slot>
    <span v-if="show" class="red-dot"></span>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="scss" scoped>
.zui-red-dot {
  display: inline-block;
  position: relative;
  .red-dot {
    position: absolute;
    z-index: 999;
    right: -4px;
    top: -4px;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: var(--zui-color-red);
  }
}
</style>
